<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../common/common.jsp"%>
<link rel="stylesheet" href="${ctx}/page/include/css/replies.css" />
<link rel="stylesheet" href="${ctx}/page/shop/css/productDetail.css">
<script type="text/javascript" src="${ctx}/page/shop/js/productDetail.js"></script>
<title>商品详情</title>
</head>
<body>
		<%@ include file="../common/header.jsp"%>
		<div class="container">
			<div class="row">
				<div class="col-md-9">
					<div class="panel panel-default">
						<div class="panel-body">
							<div class="media">
  								<div class="media-left productImage">
    								<img src="${product.listImage}">
  								</div>
  								<div class="media-body productInfo">
    								<h4 class="media-heading">${product.name}</h4>
    								<p style="color: #333;font-size:12px;word-break: break-all;">${product.summary}</p>
    								<p>配送方式:<span>${product.deliver}&nbsp运费:&yen<fmt:formatNumber type="number" value="${product.deliverFee}" pattern="0.00" maxFractionDigits="2"/></span></p>
    								<p>库存:<span id="stock">${product.stock}</span></p>
    								<p>价格:<span id="price" class="price">&yen<fmt:formatNumber type="number" value="${product.price}" pattern="0.00" maxFractionDigits="2"/></span></p>
    								<p>
    									规格:
    									<c:forEach items="${skuRels}" var="skuRel">
    										<label class="radio-inline">
  												<input type="radio" name="inlineRadioOptions" id="${skuRel.id}" value="${skuRel.id}">
  												<c:choose>
  													<c:when test="${skuRel.skuValue2 eq null}">
  														${skuRel.skuValue1}
  													</c:when>
  													<c:otherwise>
  														${skuRel.skuValue1}&nbsp${skuRel.skuValue2}
  													</c:otherwise>
  												</c:choose>
											</label>
    									</c:forEach>
    								</p>
    								<p>
    									购买数量:
    									<button onclick="plus('1')" class="label label-primary">加</button>
											<span id="counts">1</span>
										<button onclick="plus('0')" class="label label-default">减</button>
    								</p>
    								<button onclick="buyNow('${product.id}','${product.productSkuRelationId}')" class="btn btn-danger" role="button">立即购买</button> 
    								<button onclick="addCart('${product.id}','${product.name}','${product.smallImage}','${product.productSkuRelationId}')" class="btn btn-success"  class="btn btn-success" role="button">加入购物车</button>
  								</div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-body contentDetail">
							${product.markedownToHtml(product.detail)}
						</div>
						<div class="panel-footer">
							<c:if test="${member ne null}">
								<button id="collect" name="collect" type="button" onclick="changeCollect('${product.id}')" class="btn btn-default btn-sm pull-right">
								<c:if test="${isCollect}">
									<span class="glyphicon glyphicon-star"></span>
									取消收藏
								</c:if>
								<c:if test="${!isCollect}">
									<span class="glyphicon glyphicon-star-empty"></span>
									加入收藏
								</c:if>
								</button>
							</c:if>
							<div class="bdsharebuttonbox" data-tag="share_1">
								<a class="bds_qzone" data-cmd="qzone" href="#"></a>
								<a class="bds_tsina" data-cmd="tsina"></a>
								<a class="bds_weixin" data-cmd="weixin"></a>
							</div>
							<input type="hidden" id="isCollect" name="isCollect" value="${isCollect}">
						</div>
					</div>
      				<c:if test="${commentList.size() gt 0}">
						<div class="panel panel-default">
							<div class="panel-heading">用户评论</div>
							<div class="panel-body">
								<c:forEach items="${commentList}" var="comment">
									<div class="media">
										<div class="media-left">
											<img onerror="this.src='${ctx}/static/imgs/avatar.jpg'" src="${comment.fromMember.avatar}" class="avatar" />
										</div>
										<div class="media-body">
											<div class="media-heading">
												<a style="color: #333333">${comment.fromMember.name}</a>
												<small style="color: #999999">${comment.formatDate(comment.createTime)}</small>
											</div>
											<div class="replyContent contentDetail">${comment.markedownToHtml(comment.content)}</div>
										</div>
									</div>
									<div class="divide"></div>
								</c:forEach>
							</div>
						</div>
					</c:if>
				</div>
				<div class="col-md-3 hidden-sm hidden-xs">
					<c:if test="${member ne null}">
						<%@ include file="../include/memberInfoInShop.jsp"%>
					</c:if>
					<%@ include file="../include/myShoppingCart.jsp"%>
				</div>
			</div>
		</div>
		<input type="hidden" id="topicId" name="topicId" value="${topic.id}">
		<%@ include file="../common/footer.jsp"%>
		
	<script>
	    var id = '${product.id}';
		var name = '${product.name}';
		var summary = '${product.summary}';
		var bbsUrl = '${bbsUrl}';
		var image = '${product.listImage}';
		window._bd_share_config = {
			common : {
				bdText : name,	
				bdDesc : summary,
				bdUrl : bbsUrl+'/product/'+id, //上线后设为动态
				bdPic : image
			},
			share : [{
				"bdSize" : 16 //分享按钮的尺寸
			}]
		}
		with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
	</script>
</body>
</html>